<template>
  <div style="display: flex;flex-direction: column;height:100%;width:100%;justify-content: space-between;">
    <div class="title">
      <el-image :src="require('@/assets/images/dataScreen/operationTitle.png')" style="width: 7px;height: 14px;margin-right: 10px"></el-image>
      <div>运行监测</div>
    </div>
    <div class="main">
      <div class="content" v-for="item in topicList" :key="item.id">
        <div style="display: flex;width:12%;flex-basis: 12%;height:100%">
          <el-image :src="require('@/assets/images/dataScreen/bottomleftIcon.png')" style="width: 15px;height: 15px"></el-image>
        </div>
        <div style="display: flex;width:88%;flex-basis: 88%;height:100%;flex-direction: column;align-items: center;justify-content: space-between">
          <div>{{item.name}}</div>
          <div style="font-size: 20px"><span style="color:rgba(0,255,255,1)">{{item.onlineCount }}</span>/<span style="color:rgba(255,255,255,1)">{{item.totalCount }}</span></div>
          <div style="color:rgb(173,172,172)">在线数量/总数量</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getDeviceStatistics} from '@/api/ht/dataScreen'
export default {
  name: "operationMonitoring",
  data(){
    return{
      topicList:[],
      timer:null,
    }
  },
  mounted(){
    let that=this
    that.getDeviceStatisticsList()
    that.timer=setInterval(function(){
      that.getDeviceStatisticsList()
    },10000)
  },
  methods:{
    getDeviceStatisticsList(){
      getDeviceStatistics().then(res => {
        this.topicList=res.data
        for (let i in this.topicList){
          if (this.topicList[i].type === 0){
            this.topicList[i].name='大口径流量计'
          }else if (this.topicList[i].type === 1){
            this.topicList[i].name='小口径流量计'
          }else if (this.topicList[i].type === 2){
            this.topicList[i].name='水源水质'
          }else if (this.topicList[i].type === 3){
            this.topicList[i].name='出厂水水质'
          }else if (this.topicList[i].type === 4){
            this.topicList[i].name='末梢水水质'
          }else if (this.topicList[i].type === 5){
            this.topicList[i].name='压力'
          }else if (this.topicList[i].type === 6){
            this.topicList[i].name='视频'
          }else if (this.topicList[i].type === 7){
            this.topicList[i].name='阀控'
          }else if (this.topicList[i].type === 8){
            this.topicList[i].name='液位计'
          }
        }
      })
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
    this.timer=null
  }
}
</script>

<style lang="scss" scoped >
.title{
  display: flex;
  height: 10%;
  flex-basis: 10%;
  color:white;
  font-size: 18px;
  font-weight: 700;
  align-items: center;
  //justify-content: center;
}
.main{
  display: flex;
  height: 90%;
  flex-basis: 100%;
  width:100%;
  color:white;
  font-size: 14px;
  align-items: center;
  flex-wrap:wrap;
  justify-content: space-between;
  .content{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31%;
    height: 32%;
    background: rgba(0,0,0,0.4);
    border: 1px solid #06B8FF;
    border-radius: 10px;
    //margin:10px 0;
    padding:5px;
  }
}
</style>
